<template>
  <div class="app-container details product-details">
    <el-row :gutter="20">
      <!--物料分类-->
      <el-col :span="5" class="details-left box-card">
        <el-card>
          <!-- 系统介绍 -->
          <div class="details-left-top details-left-box">
            <!-- 项目才显示图标 -->
            <!-- <i class="el-icon-s-tools"></i> -->
            <div class="top">
              <img src="@/assets/images/u112097.svg" />
              <label>{{ formData.name }}</label>
              <p>{{ formData.number }}</p>
            </div>
          </div>
          <div class="details-left-box">
            <!-- <div class="title">项目资产概况</div> -->
            <div class="cnt">
              <el-row :gutter="24" class="btn-box">
                <el-col :span="12">
                  <el-button class="w-full" type="primary" @click="handleStatus"
                    >状态更新</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button
                    class="w-full"
                    type="primary"
                    plain
                    @click="handleUpdate"
                    >编辑物料</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button
                    class="w-full"
                    type="primary"
                    plain
                    v-hasPermi="['productMange:del']"
                    @click="handleDel"
                    >删除物料</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="details-left-box">
            <div class="title">物料信息</div>
            <ul class="cnt status-box">
              <li>
                <el-icon><Notebook /></el-icon>
                <label>状态</label>
                <p>
                  <dict-drop
                    :options="enable_status"
                    :value="formData.status"
                  />
                </p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>板块</label>
                <p>
                  <dict-drop
                    :options="ord_product_plate_type"
                    :value="formData.plateType"
                  />
                </p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>分类</label>
                <p>{{ formData.categoryName }}</p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>创建时间</label>
                <p>{{ formData.updateTime }}</p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19" class="box-card">
        <el-card class="details-right">
          <el-tabs v-model="activeName" class="details-right-tabs">
            <el-tab-pane
              v-for="(item, index) in tabsList"
              :key="index"
              :label="item.label"
              :name="item.name"
              class="tab-icon"
            />
            <div class="details-right-cnt">
              <component
                :is="components[activeName]"
                :productData="formData"
                v-bind="componentData"
              />
            </div>
          </el-tabs>
        </el-card> </el-col
    ></el-row>

    <!-- 状态更新对话框 -->
    <el-dialog
      :title="statusBox.title"
      v-model="statusBox.open"
      :width="statusBox.width"
      append-to-body
      @close="cancel"
    >
      <el-form
        ref="statusRef"
        :model="statusForm"
        :rules="statusRules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="物料名称" prop="name">
              <el-input
                v-model="statusForm.name"
                disabled
                placeholder="请输入物料名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="物料状态" prop="label">
              <el-select
                class="w-full"
                v-model="statusForm.status"
                placeholder="请选择物料状态"
              >
                <el-option
                  v-for="item in enable_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="更新说明" prop="description">
              <el-input
                v-model="statusForm.description"
                type="textarea"
                rows="4"
                maxlength="100"
                show-word-limit
                placeholder="请输入更新说明"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="ProductDetails">
import { reactive, toRefs, ref, createApp, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  changeProductStatus,
  delOrdproduct,
  getOrdproduct
} from '@/api/productMange/product'
import useTagsViewStore from '@/store/modules/tagsView'
import Basic from './basic'
import Business from './business'
import Finance from './finance'
import OperationLog from '@/businessComponents/OperationLog'
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()
const activeName = ref('Basic')
const formData = ref({})
const components = shallowRef({
  Basic,
  Business,
  Finance,
  OperationLog
})
const { enable_status, ord_product_plate_type } = proxy.useDict(
  'enable_status',
  'ord_product_plate_type'
)

const data = reactive({
  tabsList: [
    {
      label: '基础信息',
      name: 'Basic',
      data: {
        productData: computed(() => {
          return formData.value
        })
      }
    },
    {
      label: '财务信息',
      name: 'Business',
      data: {
        productData: computed(() => {
          return formData.value
        })
      }
    },
    {
      label: '业务信息',
      name: 'Finance',
      data: {
        productData: computed(() => {
          return formData.value
        })
      }
    },
    {
      label: '操作日志',
      name: 'OperationLog',
      data: {
        tableParam: computed(() => {
          return {
            businessId: formData.value.id, //业务id
            busineName: formData.value.name, //业务名称
            tableName: 'ord_product' //业务类型  biz_customer  客户页面  ord_project  项目  ord_order订单 ord_product物料
          }
        })
      }
    }
  ],
  componentData: [],

  statusBox: {
    title: '状态更新',
    open: false,
    width: '800px'
  },

  statusForm: {},
  statusRules: {}
})
let { tabsList, componentData, statusBox, statusForm, statusRules } =
  toRefs(data)

watchEffect(() => {
  if (route.query.productId) {
    console.log('这是详情！')
    getFormData(route.query.productId)
    // statusForm.value.name = formData.value.name
  }
})
// watch(
//   () => [formData], //[passData.data, data.crudData],
//   (newVal, oldValue) => {
//     statusForm.value.name = formData.value.name
//   },
//   { deep: true }
// )
/** 获取物料详情
 * @param {number}  id 表单id
 */
onMounted(() => {
  componentData.value = computed(() => {
    let val = tabsList.value.filter(e => {
      return e.name == activeName.value
    })
    console.log('val[0].data==>', val[0].data)
    return val[0].data
  })
})
function getFormData(id) {
  getOrdproduct(id).then(res => {
    formData.value = res.data
  })
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 初始化
function init() {
  //   getFormData(route.query.productId)
  //   statusForm.value.name = formData.value.name
}
// 状态更新
function handleStatus() {
  statusForm.value.name = formData.value.name
  statusForm.value.id = formData.value.id
  statusForm.value.status = formData.value.status
  statusBox.value.open = true
}
// 编辑物料
function handleUpdate() {
  goTo('/source/product/editProduct', { productId: formData.value.id })
}
// 删除物料
function handleDel() {
  console.log('删除物料')
  proxy.$modal
    .confirm('是否确认删除名称为"' + formData.value.name + '"的数据项?')
    .then(function () {
      return delOrdproduct(formData.value.id)
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')

      useTagsViewStore().delView(router.currentRoute.value)
      router.go(-1)
    })
    .catch(() => {})
}
function cancel() {
  statusBox.value.open = false
  reset()
}
function submitForm() {
  console.log('statusForm.value', statusForm.value)
  changeProductStatus(statusForm.value).then(res => {
    statusBox.value.open = false
    proxy.$modal.msgSuccess('修改成功')
    reset()
  })
}

/** 表单重置 */
function reset() {
  statusForm.value = {}
  proxy.resetForm('statusRef')
}

init()
</script>
<style scoped lang="scss">
@import '@/assets/styles/detailsStyle.scss';
</style>
